<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: black;
        }
        .head{
            margin: 100px auto;
            width: 310px;
           position: relative;
           color: aliceblue;
           
        }
        .tt{ 
             font-family: Digital Dismay;
            font-size: 80px;
            text-align: center;
        }
        .foot{
            position: absolute;
            right: 0;
            top: 0;
        }
        .hh{
            font-size: 20px;
            
            /* float: right; */
        }
    </style>
</head>
<body>
    <div class="head">
        <span class="hour tt"></span>
        <span class="tt">:</span>
        <span class="minute tt"></span>
        <span class="tt">:</span>
        <span class="second tt"></span>
    </div>
    <div class="head">
        <div class="foot">
             <span class="year hh"></span>
        <span class="hh">年</span>
        <span class="month hh"></span>
        <span class="hh">月</span>
        <span class="date hh"></span>
        <span class="hh">日</span>
        <span class="hh"> </span>
        <span class="hh">星期</span>
        <span class="day hh"></span>
        </div>
       
        
    </div>
    <script>
           var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var year = document.querySelector('.year');
        var month = document.querySelector('.month');
        var date = document.querySelector('.date');
        var day = document.querySelector('.day');
        // var inputTime = +new Date('2021-3-29 20:00:00'); // 返回的是用户输入时间总的毫秒数
        getTime(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(getTime, 1000);

        var date = new Date();
        console.log(date.getHours());
        console.log(date.getMinutes());
        console.log(date.getSeconds());

        function getTime(){
            var time = new Date();
            var y = time.getFullYear();
            year.innerHTML = y;
            var mo = time.getMonth()+1;
            month.innerHTML = mo;
            var da = time.getDate();
            date.innerHTML = da;
            var ay = time.getDay();
            day.innerHTML = ay;
            var h = time.getHours();
           h = h < 10 ? '0' + h : h;
           hour.innerHTML = h;
            var m = time.getMinutes();
           m = m < 10 ? '0' + m : m;
           minute.innerHTML = m;
            var s = time.getSeconds();
           s = s < 10 ? '0' + s : s; 
           second.innerHTML = s;
            // return h + ':' + m + ':' + s;
           
        }
        console.log(getTime());
        // document.write(getTime());
    </script>
</body>
</html>